<template>
    <div>
        <el-dialog @closed="toNull()" title="设置权限" :visible.sync="accFlag" >
            <!-- 表单的内容，里面的每一个控件都有一个el-form-item的栏目格式用来规定label以及位置 -->
            <div>
                <el-tree
                        :data="menus"
                        show-checkbox
                        node-key="menusId"
                        ref="tree"
                        :default-checked-keys="changeRuleParam.checked"

                        :props="defaultProps">
                </el-tree>
            </div>
            <!-- 弹出框底部的两个按钮 -->
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="toNull()">重 置</el-button>
                <el-button type="primary"  @click="getCheckedKeys">提 交</el-button>
            </div>
        </el-dialog>




        <el-table
                :data="rules"
                style="width: 100%"

        >


            <el-table-column
                    prop="ruleId"
                    label="id"
                    width="60">
            </el-table-column>
            <el-table-column
                    prop="ruleName"
                    label="角色名"
                    width="70">
            </el-table-column>

            <el-table-column
                    prop="ruleStatus"
                    label="角色状态"
                    width="100"
            >
            </el-table-column>


            <el-table-column label="操作"
                             width="300">
                <template slot-scope="scope">

                    <el-button @click="loadMenus(scope.row.ruleId)" type="warning" icon="el-icon-edit" circle >授权</el-button>
                    <!--        <el-button @click="delOne(scope.row.movieId)" type="danger" icon="el-icon-delete" circle ></el-button>-->
                </template>
            </el-table-column>


        </el-table>
<!--        <div class="block">-->
<!--            <el-pagination-->
<!--                    layout="prev, pager, next"-->
<!--                    :total="this.total" :page-size="findAccountParam.pageSize"-->
<!--                    :current-page="findAccountParam.pageIndex"-->
<!--                    @current-change="pageChange"-->
<!--            >-->
<!--            </el-pagination>-->
<!--        </div>-->

    </div>

</template>

<script>
export default {
  name: "rule",



    data(){
        return{
            changeRuleParam:{
              checked:[],
              ruleId:null,
            },


            rules:null,
            accFlag:false,
            menus:null,
            defaultProps:{
                children: 'menuDtos',
                label: 'menusName'
            }
        }
    },
    methods:{
        getRules(){
            this.$http.get("woniuRule/all").then(
                resp=>{
                    this.rules = resp.data.object;
                    console.log(this.rules)
                }
            )
        },
        toNull(){
          this.checked = [];
        },
        loadMenus(id){
            this.$http.get("/woniuMenus/ruleSel/"+id).then(
                resp=>{
                    this.menus = resp.data.object.menus;
                    this.changeRuleParam.checked = resp.data.object.ids;
                    console.log(this.menus);
                }
            )
            this.changeRuleParam.ruleId = id;
            this.accFlag = true;
        },
      getCheckedKeys(){
        let a = this.$refs.tree.getCheckedKeys();
        let b =  this.$refs.tree.getHalfCheckedKeys();
        this.changeRuleParam.checked = a.concat(b);
        this.$http.post("/woniuMenus/changeRule",this.changeRuleParam).then(
            resp=>{
              if (resp.data.code==20000){
                this.$message({
                  message: resp.data.message,
                  type: 'success'
                });
              }
              else{
                this.$message({
                  message: resp.data.message,
                  type: 'error'
                });
              }
              this.accFlag=false;
              this.toNull();
            }
        )

      }
    },
    created() {
        this.getRules();
    }


}
</script>

<style scoped>

</style>